<template>
  <view class="container">
    <view class="head" v-if="headTips">
      收益提现后将自动个人微信零钱，可在账户明细查看记录
      <view @click="tipsHandler">不再提示</view>
    </view>
    <view class="main">
      <image src="/static/my/jinbi.png" mode=""></image>
      <view class="main_des">
        可提现金额
      </view>
      <view class="main_price">
        ￥<view>156.00</view>
      </view>
      <view class="main_detail" @click="gotoDetail">
        账户明细<uv-icon name="arrow-right" color="#666" size="13"></uv-icon>
      </view>
      <button class="flex-center" @click="withdrawal">提现</button>
    </view>
    <view class="footer">
      <view class="footer_box" @click="gotoSecond('exchange')">
        <text>兑换中心</text>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
      <view class="footer_box" @click="gotoSecond('giftRecord')">
        <text>赠送记录</text>
        <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
      </view>
    </view>
    <uv-modal ref="modalRef" title="提示" :confirmColor="'#666666'" confirmText="关闭" :width="'480rpx'">
      <template #default>
        <view class="modal_box">
          暂不可提现，可提现金额小于最底 提现金额2元
        </view>
      </template>
    </uv-modal>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
  import { ref } from 'vue';
  const headTips = ref(true)
  const modalRef = ref()
  const closeModal = () => {
    modalRef.value.close()
  }
  const withdrawal = () => {
    modalRef.value.open()
  }
  const tipsHandler = () => {
    headTips.value = false
    uni.setStorageSync('account_tips', headTips.value)
  }
  const gotoSecond = (url : string) => {
    uni.navigateTo({
      url: `/pages/mySecondary/${url}/${url}`
    })
  }

  const gotoDetail = () => {
    uni.navigateTo({
      url: './detail'
    })
  }
  

  onLoad(() => {
    headTips.value = uni.getStorageSync('account_tips')
  })
</script>

<style lang="less" scoped>
  .container {
    background-color: #f4f4f4;
    height: 100%;

    .head {
      width: 750rpx;
      height: 72rpx;
      background: #FFF4DE;
      font-size: 24rpx;
      color: #666666;
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      align-items: center;
      box-sizing: border-box;
      white-space: nowrap;

      view {
        color: #228CFE;
      }
    }

    .main {
      border-top: 1rpx solid rgba(#000, .1);
      width: 750rpx;
      height: 483rpx;
      background: #FFFFFF;
      padding: 42rpx 0 52rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      image {
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 40rpx;
      }

      &_des {
        color: #333333;
      }

      &_price {
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
        display: flex;
        align-items: flex-end;
        margin-bottom: 6rpx;

        view {
          font-size: 56rpx;
          margin-bottom: -6rpx;
        }
      }

      &_detail {
        color: #666666;
        display: flex;
      }

      button {
        width: 300rpx;
        height: 68rpx;
        background: #228CFE;
        box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
        border-radius: 34rpx;
        font-size: 30rpx;
        color: #FFFFFF;
        margin-top: 40rpx;
      }
    }

    .footer {
      margin-top: 20rpx;

      &_box {
        width: 750rpx;
        height: 100rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        align-items: center;
        font-size: 30rpx;
        color: #333333;

        &:active {
          background-color: #f1f1f1;
        }

        &:first-child {
          border-bottom: 1rpx solid rgba(#000, .1);
        }
      }
    }
    .modal_box {
      font-size: 28rpx;
      color: #333333;
    }
    :deep(.uv-modal__content) {
      padding: 30rpx;
    }
    :deep(.uv-modal__title) {
      padding-top: 35rpx ;
    }
  }
</style>